<template>
  <div class="demo-user-class">
    <p class="user-value">
      {{ user }}
    </p>
    <tiny-user v-model="user" v-bind="service" sort-by-fetch-data></tiny-user>
  </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { TinyUser, TinyModal } from '@opentiny/vue'

const user = ref('441047913162396')
const service = ref({
  fetchSuggestUser: getSuggestUser,
  fetchW3Accounts
})

function getSuggestUser(userCN) {
  return new Promise((resolve) => {
    /* 此处为输入联想搜索逻辑，，数据返回格式如下 */
    TinyModal.message(`用户输入的值为：${userCN}`)

    const result = [
      {
        programValidity: null,
        employeeNumber: '12345678',
        userType: 'HWE',
        currentRole: null,
        currentProgramIds: null,
        validRoles: null,
        defaultRole: 'otc:2749;',
        coalitionPermission: false,
        endDate: '2017-11-13T14:26:06.000+0800',
        dept: null,
        userId: 421000103624183, // value-field
        userAccount: 'test1',
        userCN: 'test1', // text-field
        email: 'test1@test1.com',
        creationDate: '2012-08-17T11:26:18.000+0800',
        lastUpdateDate: '2015-03-30T14:27:34.000+0800',
        rowIdx: -1,
        creationUserCN: null,
        lastUpdateUserCN: null
      },
      {
        programValidity: null,
        employeeNumber: '12345678',
        userType: 'WX',
        currentRole: null,
        currentProgramIds: null,
        validRoles: null,
        defaultRole: null,
        coalitionPermission: false,
        endDate: null,
        dept: null,
        userId: 435259704104388,
        userAccount: 'test2',
        userCN: 'test2',
        email: 'test2@test2.com',
        creationDate: '2017-10-23T11:16:59.000+0800',
        lastUpdateDate: '2017-10-23T11:16:59.000+0800',
        rowIdx: -1,
        creationUserCN: null,
        lastUpdateUserCN: null
      },
      {
        programValidity: null,
        employeeNumber: '12345678',
        userType: 'HWE',
        currentRole: null,
        currentProgramIds: null,
        validRoles: null,
        defaultRole: null,
        coalitionPermission: false,
        endDate: '2017-10-26T11:48:56.000+0800',
        dept: null,
        userId: 441047913162396,
        userAccount: 'test3',
        userCN: 'test3',
        email: 'test3@test3.com',
        creationDate: '2015-01-06T09:38:41.000+0800',
        lastUpdateDate: '2017-10-10T15:13:28.000+0800',
        rowIdx: -1,
        creationUserCN: null,
        lastUpdateUserCN: null
      },
      {
        programValidity: null,
        employeeNumber: '12345678',
        userType: 'WX',
        currentRole: null,
        currentProgramIds: null,
        validRoles: null,
        defaultRole: null,
        coalitionPermission: false,
        endDate: '2017-11-10T08:50:56.000+0800',
        dept: null,
        userId: 702973890055088,
        userAccount: 'test4',
        userCN: 'test4',
        email: 'test4@test4.com',
        creationDate: '2017-10-10T18:22:33.000+0800',
        lastUpdateDate: '2017-10-10T18:22:33.000+0800',
        rowIdx: -1,
        creationUserCN: null,
        lastUpdateUserCN: null
      }
    ]

    setTimeout(() => {
      resolve(result)
    }, 1000)
  })
}

function fetchW3Accounts(userId) {
  /* 此为初始化时，v-model 值不为空时，根据默认值查询用户数据，数据返回格式如下 */
  TinyModal.message(`v-model 默认值为：${userId}`)

  return new Promise((resolve) => {
    const result = [
      {
        programValidity: null,
        employeeNumber: '12345678',
        userType: 'HWE',
        currentRole: null,
        currentProgramIds: null,
        validRoles: null,
        defaultRole: null,
        coalitionPermission: false,
        endDate: '2017-10-26T11:48:56.000+0800',
        dept: null,
        userId: 441047913162396,
        userAccount: 'test3',
        userCN: 'test3',
        email: 'test3@test3.com',
        creationDate: '2015-01-06T09:38:41.000+0800',
        lastUpdateDate: '2017-10-10T15:13:28.000+0800',
        rowIdx: -1,
        creationUserCN: null,
        lastUpdateUserCN: null
      }
    ]

    setTimeout(() => {
      resolve(result)
    }, 1000)
  })
}
</script>

<style scoped>
.demo-user-class {
  width: 280px;
}
.user-value {
  font-size: 14px;
  line-height: 1.5;
  padding: 16px 0;
}
</style>
